<template>
    <div class="sg-page-box">
        <sg-search :searchList="searchList" @search="searchHandle" @reset="resetHandle"></sg-search>
        <div class="table-wrap">
            <div class="sg-btn-wrap" v-if="btnList.length">
                <sg-button :btnList="btnList" @click-button="clickButtonHandle"></sg-button>
            </div>
            <div class="table-box">
                <sg-table
                    v-model:selectList="selectList"
                    :tableData="tableData"
                    :tableColumn="tableColumn"
                    @select-change="selectChangeHandle"
                ></sg-table>
            </div>
            <sg-pagination v-model:currentPage="currentPage" v-model:pageSize="pageSize" :total="total"></sg-pagination>
        </div>
    </div>
</template>
<script lang="ts" setup name="SGPage">
import type { IButton } from '@/types/button';
import type { ITableColumn } from '@/types/table';
const { searchList, tableData, tableColumn, btnList } = defineProps({
    searchList: {
        type: Array,
        default: () => []
    },
    tableData: {
        required: true,
        type: Array,
        default: () => []
    },
    tableColumn: {
        required: true,
        type: Array<ITableColumn>,
        default: () => []
    },
    btnList: {
        type: Array<IButton>,
        default: () => []
    },
    total: {
        type: [Number, String],
        default: 0
    }
});

type DynamicEmits = {
    (event: string, payload: any): void;
};

const emit = defineEmits<DynamicEmits>();

// 表格选择列表项
let selectList = ref([]);
// 分页参数
let currentPage = ref(1);
let pageSize = ref(10);
// 表格查询默认差参
let searchParmas = reactive({
    size: 10,
    current: 1
});
// 按钮点击事件
const clickButtonHandle = (item: IButton) => {
    emit(item.optionName, item);
};
//表格选中
const selectChangeHandle = (val: any) => {
    console.log(val, 'selectList123467');
};
// 查询事件
const searchHandle = (val: any) => {
    searchParmas = Object.assign({}, searchParmas, val);
    emit('search', searchParmas);
};
// 重置事件
const resetHandle = (val: any) => {
    searchParmas = Object.assign({}, searchParmas, val);
    currentPage.value = 1;
    searchParmas.current = 1;
    emit('search', searchParmas);
};

watch(currentPage, (newValue) => {
    searchParmas.current = newValue;
    emit('search', searchParmas);
});
watch(pageSize, (newValue) => {
    searchParmas.size = newValue;
    emit('search', searchParmas);
});

onMounted(() => emit('search', searchParmas));
</script>

<style lang="scss" scoped>
.sg-btn-wrap {
    margin-bottom: 24px;
}
</style>
